import Header from "./../../components/Header";
import {Button, Row, Col, Modal} from "./../../rsuite";
import {connect} from "react-redux";
import NewsForm from "./../../components/form/news";
import NoData from "./../../components/nodata";
import Search from "./../../components/search";
import Panel from "./../../elements/Panel";
import i18 from "./../../libs/i18";
import {URL, pureUrl, md5Url} from "./../../libs/Url";
import {SUBJECT, PAGE_SUBJECT} from "./../../actions/subject";
import {fetch, fetch_remove, enable_delete_btn, selectAllItem, selectItem, openModal, closeModal} from "../../actions";
const Lang = i18.notice_category;

const Category = React.createClass({

    getInitialState() {
        return {
            enableDelete: 0,
            size: 15,
            selected: {},
            total: 0,
        };
    },
    componentDidMount() {
        const {dispatch} = this.props;
        dispatch(fetch({url: URL.NOTICE_CATEGORY_FIND}));
    },
    search(keyword){
        const {dispatch} = this.props;
        dispatch(fetch({keyword, url: URL.NOTICE_CATEGORY_FIND}));

        // dispatch(fetchCategory(keyword));
    },
    render(){
        const self = this;
        const {dispatch} = this.props;
        let data = self.props[md5Url.NOTICE_CATEGORY_FIND];
        (!data.list && (data.list = []));
        return (
            <Panel>
                <Header>{Lang.title}</Header>
                <Row>
                    <Col xs={12} md={12}>
                        <table className="table table-bordered table-striped general-table">
                            <thead>
                            <tr>
                                <th style={{width: '50px'}}>
                                    <input type="checkbox" onClick={(e)=> {
                                        const self = this;
                                        dispatch(selectAllItem(md5Url.NOTICE_CATEGORY_FIND, e.target.checked));
                                        dispatch(enable_delete_btn(PAGE_SUBJECT.NOTICE_CATEGORY, {
                                            num: (e.target.checked ?
                                                data.list.length : 0),
                                            all: true
                                        }));
                                    }}/>
                                </th>
                                <th style={{width: '60px'}}>NO.</th>
                                <th>{Lang.table.header.name}</th>
                                <th>{Lang.table.header.desc}</th>
                                <th>{Lang.table.header.num}</th>
                                {/*<th style={{width: '120px'}}>{Lang.table.header.oper}</th>*/}
                            </tr>
                            </thead>
                            <tbody>
                            {
                                data.list.map((item, index)=> {
                                        item.index = index;
                                        return <tr key={index}>
                                            <td>
                                                <input type="checkbox" checked={(item.checked ? 'checked' : '')}
                                                       onClick={(e)=> {
                                                           dispatch(selectItem(md5Url.NOTICE_CATEGORY_FIND, {
                                                               index: index,
                                                               checked: e.target.checked
                                                           }));
                                                           dispatch(enable_delete_btn(PAGE_SUBJECT.NOTICE_CATEGORY, {num: (e.target.checked ? 1 : -1)}));
                                                       }
                                                       }/>
                                            </td>
                                            <td className="hidden-phone">{index + 1}</td>
                                            <td>{item.name}</td>
                                            <td>{item.comment}</td>
                                            <td>{item.articleCount}</td>

                                        </tr>
                                    }
                                )
                            }
                            </tbody>
                        </table>
                        {
                            data.list.length ? '' : <NoData />
                        }
                    </Col>
                </Row >

            </Panel>
        )
    }
});

// Which props do we want to inject, given the global state?
// Note: use https://github.com/faassen/reselect for better performance.
function select(state) {
    return {
        //add NOTICE CATEGORY FIND subject
        [md5Url.NOTICE_CATEGORY_FIND]: state.fetchBySubject[md5Url.NOTICE_CATEGORY_FIND],
        [md5Url.NOTICE_CATEGORY]: state.fetchBySubject[md5Url.NOTICE_CATEGORY],
        [PAGE_SUBJECT.NEWS_CATEGORY]: state.pageBySubject[PAGE_SUBJECT.NEWS_CATEGORY],
    }
}
// 包装 component ，注入 dispatch 和 state 到其默认的 connect(select)(App) 中；
export default connect(select)(Category)
